<template>
	<div class="wrapper">
				
				<!-- header部分 -->
				<header>
					<button class="back-arrow" @click="goBack"></button>
					<p>商家信息</p>
				</header>
				
				<!-- 商家logo部分 -->
				<div class="business-logo">
					<img :src="business.businessImg">
				</div>
				
				<!-- 商家信息部分 -->
				<div class="business-info">
					<h1>{{business.businessName}}</h1>
					<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
					<p>{{business.businessExplain}}</p>
					<button class="more-info-btn" @click="goBackToCart()">返回购物车</button>
				</div>
				
				<!-- 评论列表部分 -->
				<ul class="comment" v-if="hasComments">
					<li v-for="item in commentArr" v-if="item.comment">
						<div class="comment-user">
							<img :src="item.user.userImg">
              				<h3>{{item.user.userName}}</h3>
							<div class="comment-info">
								<p>{{item.comment}}</p>
							</div>
						</div>
					</li>
				</ul>
				<p v-else class="no-comments">暂无评价</p>
			</div>
</template>

<script>
    import AlertModal from '../views/AlertModal.vue';
	import request from '../request.js';
	export default{
		name:'BusinessInfo',
		components: {
         AlertModal
        },
		data(){
			return {
				alertVisible: false,
		    	alertMessage: '',
				businessId: this.$route.query.businessId,
				business:{},
				commentArr:[],
				user:{}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			
			//根据businessId查询商家信息
			request.get(`businesses/${this.businessId}`).then(response=>{
				this.business = response.data;
			}).catch(error=>{
				console.error(error);
			});
			
			//根据businessId查询所属评价
			request.get(`comment/${this.businessId}`).then(response=>{
				this.commentArr = response.data;
			}).catch(error=>{
				console.error(error);
			});
		},
		methods:{
			goBack() {
				console.log('Trying to go back...');
                this.$router.go(-1); // 相当于浏览器的后退操作
            },
      		goBackToCart(businessId) {//跳转到商家购物车   
        		this.$router.push({ path: '/BusinessInfo', query:{businessId:this.businessId} });
      		},
		},
		computed: {
    		hasComments() {
      			return this.commentArr.some(item => item.comment); // 如果数组中至少有一个非空的评论，返回 true
    		}		
  		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper{
		width: 100%;
		height: 100%;
	}
	/****************** 返回键 ******************/

	.back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}
	/****************** header部分 ******************/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/****************** 商家logo部分 ******************/
	.wrapper .business-logo{
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-logo img{
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}
	
	/****************** 商家信息部分 ******************/
	.wrapper .business-info{
		width: 100%;
		height: 20vw;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wrapper .business-info h1{
		font-size: 5vw;
	}
	.wrapper .business-info p{
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}
	/* 添加查看更多详情按钮的样式 */
.wrapper .business-info .more-info-btn {
  background-color: #3190E8;
  color: #fff;
  border: none;
  padding: 1vw 3vw;
  border-radius: 5px;
  font-size: 3vw;
  cursor: pointer;
  margin-top: 2vw;
}

/****************** 评论列表部分 ******************/

.wrapper .comment {
  list-style-type: none; /* 移除默认的列表样式 */
  padding: 0;
  margin: 0;
  width: 90%; /* 让评论列表居中 */
  margin-top: 5vw;  /* 评论列表与商家信息之间的间距 */
  margin-left: auto;
  margin-right: auto;
}

.wrapper .comment li {
  background-color: #f9f9f9; /* 给每条评论添加背景色 */
  margin-bottom: 3vw; /* 每条评论之间留出一些空间 */
  padding: 4vw; /* 增加内边距 */
  border-radius: 8px; /* 为评论容器添加圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
}

/****************** 用户信息 ******************/
.comment-user {
  display: flex;
  align-items: center; /* 水平居中对齐用户头像和昵称 */
  margin-bottom: 2vw; /* 头像和评论之间的间距 */
}

.comment-user img {
  width: 12vw; /* 调整头像大小 */
  height: 12vw;
  border-radius: 50%; /* 将头像设置为圆形 */
  margin-right: 3vw; /* 头像与昵称之间的间距 */
  border: 2px solid #ddd; /* 添加头像的边框 */
}

.comment-user h3 {
  font-size: 4vw; /* 用户昵称字体大小 */
  color: #333; /* 用户昵称颜色 */
  margin: 0;
  font-weight: 500; /* 字体加粗 */
}

/****************** 评论信息 ******************/
.comment-info {
  padding-left: 15vw; /* 保证评论文字与用户头像对齐 */
}

.comment-info p {
  font-size: 4vw; /* 调整评论字体大小 */
  color: #555; /* 调整评论文字颜色 */
  line-height: 1.6; /* 增加行高，提升可读性 */
  margin: 0;
}

/* 暂无评论 */
.no-comments {
  color: #888; /* 文本颜色 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文本居中 */
  padding: 20px 0; /* 上下内边距 */
  border: 1px solid #eee; /* 边框，可以根据需要调整或去除 */
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 5px; /* 边框圆角 */
  margin-top: 50px; /* 与评论列表的间距 */
}

</style>